<template>
   <!-- 设置上下班弹出层 -->
   <view>
    <up-popup :show="shows"  :round="14" mode="center" @close="closepop" :lazyRender="false">
      <view class="popup_box">
        <!-- 标题文字 -->
        <view class="popup_title">
          加减班
        </view>
        <!-- input 输入框 -->
       
        <view class="popup_input">
          <up-radio-group v-model="radiovalue" placement="column" @change="groupChange">
            <up-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in radiolist" :key="index"
              :label="item.name" :name="item.value">
            </up-radio>
          </up-radio-group>
        </view>
        <view class="popup_input">
          <view class="pop_time">
            <view class="name">金额</view>
            <up-input v-model="inputValue"  type="digit" placeholder="请输入"   />
      
          </view>
         
          <view class="hint" v-if="demarcation_time_hintmoney == true">已超出分佣上限</view>
        </view>
        <!-- 提示文本 -->
        <view class="hint_text">
          <view class="hint_image">
            <image :src="`${baseUrl}/uploads/uniapp_image/staff/piliangshezhi_icon1@2.png`" mode="scaleToFill" />
          </view>
          <view>此处修改后，直接影响代理商金额！</view>
        </view>
        <!-- 按钮集合 -->
        <view class="button_box">
          <view class="left_button" @click.prevent="closepop">取消</view>
          <view class="right_button" @click.prevent="affirm">确认</view>
          
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { baseUrl } from '@/sheep/config';
import { ref,reactive,watch } from "vue";
const emits = defineEmits(['cancel','affirm','update:value', 'clear-text']);
const props = defineProps({
  shows: {
      type: Boolean,
      default: false
    },
    lists: {
      type: String,
      default: false
    },
})
watch(() => props.shows,(newVal, oldVal) => {
  if(newVal == true ){
    inputValue.value =  ''
    radiovalue.value =  'inc'

  }
  }
)

// 上下班打卡选择
const radiolist = reactive([
  {
    name: '加班',
    disabled: false,
    value: 'inc'
  },
  {
    name: '减班',
    disabled: false,
    value: 'dec'
  }
]);
const radiovalue = ref('inc');

  //点击事件
  function closepop(){
    demarcation_time_hintmoney.value =false
    inputValue.value = ''
         emits('cancel', false)
          return;

  }
  const inputValue = ref()
const demarcation_time_hintmoney = ref(false)
  function affirm(){
    if (radiovalue.value == 'dec' && props.lists < inputValue.value) {
        demarcation_time_hintmoney.value =true
        // inputValue.value = ''
     }else{
        demarcation_time_hintmoney.value =false
         emits('affirm',inputValue.value,radiovalue.value)
        return;
    
      }
  
  }
//上下班选择
const groupChange = (n) => {
  radiovalue.value = n

};

</script>

<style  lang="scss" scoped>


   .popup_box {
        width: 600rpx;
        height: 590rpx;
        border-radius: 28rpx;
        background-color: #FFFFFF;
        position: relative;
   
        .popup_title {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 40rpx;
            font-style: normal;
            text-decoration: none;
            margin-top: 50rpx;
            margin-bottom: 45rpx;
            text-align: center;
        }
        // 输入框
        .popup_input {
            height: 96rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 28rpx;
            background-color: #F4F6FA;
            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
            margin: 0 40rpx;
            margin-bottom: 35rpx;
            position: relative;
        
            .pop_time{
              display: flex;
              height: 96rpx;
              align-items: center;
              .name{margin-right: 10rpx;}
            }
            .hint{
              position: absolute;
              right: 30rpx;
              bottom: -30rpx;
              z-index: 10;
              color: red;
              font-size: 22rpx;
            }
        }
       
        .hint_text {
            display: flex;
            align-items: center;
            height: 32rpx;
            font-family: PingFangSC;
            color: $uni-color-primary;
            font-weight: $uni-font-weight;
            font-size: 22rpx;
            font-style: normal;
            text-decoration: none;
            margin-bottom: 40rpx;
            .hint_image {
                width: 26rpx;
                height: 26rpx;
                margin-right: 10rpx;
                margin-left: 60rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    
        .button_box {
            display: flex;
            .left_button {
                width: 50%;
                height: 82rpx;
                text-align: center;
                line-height: 82rpx;
                border-radius: 45rpx;
                border: 4rpx solid $uni-color-primary;
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: 34rpx;
                font-style: normal;
                text-decoration: none;
                margin-left: 40rpx;
                margin-right: 20rpx;
            }
            .right_button {
                width: 50%;
                height: 90rpx;
                text-align: center;
                line-height: 90rpx;
                border-radius: 45rpx;
                background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
                font-family: PingFangSC;
                color: #FFFFFF;
                font-weight: $uni-font-weight;
                font-size: 34rpx;
                font-style: normal;
                text-decoration: none;
                margin-right: 40rpx;
                margin-left: 20rpx;
            }
        }
    }
</style>